<html>
  <head>
    <title>Página do Fulano</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="resources/css/formatacoes.css">


    <script type="text/javascript">

      function validaForm() {
        var doc = document.contato;

        //indexOf - Retorna -1 casa não encontre o @.
        arroba = doc.email.value.indexOf("@");
        //VALIDAR E-MAIL APENAS SE NÃO FOR VAZIO.
        if (doc.email.value !== "" && arroba === -1) {
          alert("E-mail inválido!");
          doc.email.focus();
          return false;
        }
        //VALIDAR MOTIVO.
        if (doc.motivo.value === "") {
          alert('Selecione um motivo!');
          doc.motivo.focus();
          return false;
        }
        //VALIDAR MENSAGEM.
        if (doc.mensagem.value === "") {
          alert("Digite uma mensagem!");
          doc.mensagem.focus();
          return false;
        }             
      }
    </script>

  </head>
  <body>
    <div id="total" >  
      <div id="cabecalho">
        <header>
          <img id="banner" alt="banner" src="resources/images/om.png">
        </header>
      </div>

      <div id="menu">
        <a href="index.html">HOME</a> | <a href="minhaCidade.html">MINHA CIDADE</a> | 
        <a href="contato.html">CONTATO</a> 
      </div>      

      <div id="central">
        <div id="redes">
          <a href="https://www.facebook.com/omauriciosilva" target="_blank">
            <img id="fb" align="right" alt="facebook" src="resources/images/fb.png">                  
          </a>
          <a href="https://twitter.com/omauriciosilva" target="_blank">
            <img id="tw" align="right" alt="twitter" src="resources/images/tw.png">                  
          </a>
        </div>

        <h1 id="bemvindos">Formulário de Contato</h1>

        <form action="contato.html" method="post" name="contato">
          <b>Nome</b><br/>
          <input type=text name="nome" size="60" maxlength="70"><br/><br/>
          <b>Idade</b>
          <input type=text name="idade" size="2" maxlength="3">

          <b>Sexo</b>         
          <input type=radio name="sexo" value="Feminino">Feminino
          <input type=radio name="sexo" value="Masculino">Masculino<br/><br/>

          <b>E-mail</b><br/>
          <input type=text name="email" size="60"><br/><br/>

          <b>Telefone</b><br/>          
          <input type=text name="ddd" size="2" maxlength="2">
          <input type=text name="telefone" size="12" maxlength="10"><br/><br/>

          <b>UF</b>   
          <select name="uf">
            <option value=""></option>
            <option value="PB">PB</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="RJ">RJ</option>
            <option value="SP">SP</option>
          </select>

          <b>Cidade</b>   
          <select name="cidade">
            <option value=""></option>
            <option value="João Pessoa">João Pessoa</option>
            <option value="Recife">Recife</option>
            <option value="Terezina">Terezina</option>
            <option value="Rio de Janeiro">Rio de Janeiro</option>
            <option value="São Paulo">São Paulo</option>
          </select>
          <br/><br/>

          <b>Setor</b><br/>    
          <select name="setor">
            <option value=""></option>
            <option value="Administrativo">Administrativo</option>
            <option value="Financeiro">Financeiro</option>
            <option value="Outros">Outros</option>            
          </select>
          <br/><br/>

          <b>Motivo do Contato</b><b style="color: red">*</b><br/>    
          <select id="motivo" name="motivo">
            <option value=""></option>
            <option value="Dúvida">Dúvida</option>
            <option value="Elogio">Elogio</option>
            <option value="Outro">Outro</option>            
          </select>          
          <br/><br/>


          <b>Mensagem</b><b style="color: red">*</b><br/>
          <textarea id="mensagem" name="mensagem" rows="5" cols="48" ></textarea><br/><br/>

          <input type="submit" name="button" id="button" onclick="return validaForm()" value="Enviar" />
          <input type="reset" value="Limpar">
        </form>

        <footer>      
          Desenvolvido por Fulano na disciplina de <a href="http://www.joaquimnabuco.edu.br/" target="_blank" style="">Programação para Web</a> – 10/09/2014
        </footer>
      </div>
    </div>
  </body>
</html>
